<template>
  <div class="cssAnimation1" >
    <!-- animation实现弹窗效果 -->
    <div class="btnDiv">
      <button class="openPopUpBtn" id="openBtn" @touchstart="openWindow">弹窗</button>
    </div>
    <div class="popUp" :class="{showCont:isShowCont,hiddenCont:!isShowCont}">
      <p>我是弹窗内容</p>
      <button class="closePopUpBtn" id="closeBtn" @touchstart="closeWindow">关闭</button>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';

@Options({ components: {} })
export default class CssAnimation1 extends Vue {
  public isShowCont = false;
  public openWindow() {
    this.isShowCont = true;
  }
  public closeWindow() {
    this.isShowCont = false;
  }
  public mounted() {

  }
}
</script>

<style lang="postcss" scoped>
.cssAnimation1{
  .btnDiv{
    text-align: center;
    .openPopUpBtn{
      width:60px;
      height:40px;
      line-height:40px;
      border:1px solid #c9c9c9;
      background-color: #FFF;
      box-shadow: 1px 1px 1px 1px #eee;
      margin-top:50px;
      &:hover{
        background-color: red;
        cursor:pointer;
      }
    }
  }
  .popUp{
    width:600px;
    height:500px;
    text-align: center;
    background-color: #FFFeee;
    border:1px solid #ccc;
    box-shadow: 1px 1px 1px 1px #eee;
    position:absolute;
    left:50%;
    margin-left:-300px;
    opacity: 0; /* 透明度为0 */
    .closePopUpBtn{
      width:60px;
      height:40px;
      line-height:40px;
      border:1px solid #c9c9c9;
      background-color: #FFF;
      box-shadow: 1px 1px 1px 1px #eee;
      margin-top:50px;
      position: absolute;
      bottom:20px;
      left:50%;
      transform:translate(-50%)
      &:hover{
         background-color: red;
        cursor:pointer;

      }
    }
  }
  /* 定义css样式 */
  .showCont{
    animation: showPopUp 1s  forwards  ;
  }
  .hiddenCont{
    animation: hiddenPopUp 1s reverse;
  }
  /* 定义动画规则 */
  @keyframes showPopUp{
    0%{
      opacity: 0;
      top: -60%;
      transform: rotateZ(0deg);
    }
    50%{
      transform: rotateZ(-10deg);
    }
    100%{
      opacity: 1;
      top: 20%;
      transform: rotateZ(0deg);
    }
  }

  @keyframes hiddenPopUp{
     0%{
       opacity: 1;
      top: 20%;
      transform: rotateZ(0deg);
    }
    50%{
     transform: rotateZ(-10deg);
    }
    100%{
     opacity: 0;
      top: -60%;
      transform: rotateZ(0deg);
    }
  }
}
</style>
